import { defineComponent } from 'vue';
import { itemAggregate, getProjectList } from '@/api/home';
import SheltV2 from '../../common/SheltV2';
import Echarts from '@/components/Echarts';
import './index.less';
import { dateFormatter } from '@/utils';
import Detail from '../Detail';
import ItmeDetail from './detail';
import SearchRow from '../SearchRow';

export default defineComponent({
  name: 'GroupItem',
  setup() {
    const detailRef = ref();
    const itemDetailRef = ref();
    const echartsRef = ref();
    const detailTitle = ref('');
    const data = reactive({
      search: {
        month: undefined,
        type: '',
        organize: '',
        is_company: 1
      }
    }) as AnyObject;

    const filterDetail = reactive({
      search: {
        month: null,
        type: '',
        pro_type: '',
        organize: '',
        is_company: 1
      }
    }) as AnyObject;
    const colors = new Map([
      ['完成超期', '#d43030'],
      ['延期进行', '#d43030'],
      ['按时完成', '#00b87a'],
      ['正常进行', '#2a82e4']
    ]);
    const tableDetail = [
      { title: '项目名称', key: 'name' },
      { title: '计划时间', key: 'create_time' },
      {
        title: '是否超期',
        key: 'over_time',
        render: function (key: string) {
          return <span style={{ color: colors.get(key) }}>{key}</span>;
        }
      }
    ];
    const _title = [
      '所有项目',
      '延期项目',
      '正常项目',
      '延期预警',
      '规范按时完成',
      '超时完成',
      '进行中项目',
      '已完成项目'
    ];
    const detailSlots = ref({
      fill: () => (
        <div class="fill">
          <p class="item_title">(统计时间08/01之后)</p>
          <SearchRow onSearch={handleItemAggregate} data={data} />
        </div>
      )
    });
    const option = ref({
      tooltip: {
        trigger: 'item'
      },
      color: [
        '#3bc27f',
        '#4a74ea',
        '#eb7b3b',
        '#eb7b3b',
        '#3bc27f',
        '#eb7b3b',
        '#4a74ea',
        '#ffc824',
        '#d46f35'
      ],
      title: [
        {
          subtext: '所有项目',
          top: '42%',
          left: '16.5%',
          itemGap: 5,
          textAlign: 'center',
          triggerEvent: true
        },
        {
          subtext: '进行中',
          top: '42%',
          left: '40.3%',
          itemGap: 5,
          textAlign: 'center',
          triggerEvent: true
        },
        {
          subtext: '已完成',
          top: '42%',
          left: '65.5%',
          itemGap: 5,
          textAlign: 'center',
          triggerEvent: true
        },
        {
          subtext: '是否规范\n按时完成',
          top: '39%',
          left: '87.5%',
          itemGap: 5,
          textAlign: 'center',
          triggerEvent: true
        }
      ],
      legend: {
        show: false
      },

      label: {
        formatter: '{name|{c}}({d}%)\n{b}',
        textAlign: 'left',
        rich: {
          name: {
            fontSize: 16,
            fontWeight: 'bold',
            padding: [5, 0]
          }
        }
      },
      media: [
        {
          option: {
            series: [
              {
                labelLine: { lengh: 0, length2: 5 },
                avoidLabelOverlap: false,
                startAngle: -10,
                type: 'pie',
                name: '所有项目',
                center: ['17%', '50%'],
                radius: ['23%', '30%']
              },
              {
                labelLine: { lengh: 0, length2: 5 },
                type: 'pie',
                name: '进行中',
                center: ['41%', '50%'],
                radius: ['23%', '30%']
              },
              {
                labelLine: { lengh: 0, length2: 5 },
                type: 'pie',
                name: '已完成',
                center: ['66%', '50%'],
                radius: ['23%', '30%']
              },
              {
                startAngle: 240,
                labelLine: { lengh: 0, length2: 5 },
                type: 'pie',
                name: '是否规范按时完成',
                center: ['88%', '50%'],
                radius: ['23%', '30%']
              }
            ]
          }
        }
      ]
    }) as AnyObject;

    const viewDetail = (type?: number | null) => {
      Object.assign(filterDetail.search, data.search);
      filterDetail.search.type = type;
      filterDetail.search.pro_type = data.search_type;
      detailTitle.value = type ? '公司项目-' + _title[type] : '公司项目';
      console.log(filterDetail);
      
      detailRef.value.show = true;
    };
    const viewLiDetail = (item: AnyObject) => {
      itemDetailRef.value.viewLiDetail(item);
    };
    handleItemAggregate();
    function handleItemAggregate() {
      const { month, ...resets } = data.search;
      const real_month = dateFormatter(month);
      itemAggregate({ month: real_month, ...resets }).then((res) => {
        option.value.media[0].option.series[0].data =
          res.data.data_total_project.list;
        option.value.title[0].text = res.data.data_total_project.total;
        option.value.media[0].option.series[1].data =
          res.data.data_progress.list;
        option.value.title[1].text = res.data.data_progress.total;
        option.value.media[0].option.series[2].data = res.data.data_finish.list;
        option.value.title[2].text = res.data.data_finish.total;
        option.value.media[0].option.series[3].data = res.data.data_normal.list;
        option.value.title[3].text = res.data.data_normal.total;
        const { pro_type, organize_type } = res.data;

        if (!data.list) {
          data.list = [
            {
              key: 'month',
              type: 'popup',
              title: '日期选择',
              icon: 'calendar',
              placeholder: '请选择'
            },
            {
              key: 'type',
              // detail_key: 'pro_type',
              type: 'list',
              title: '项目类型',
              placeholder: '项目类型',
              list: pro_type
            },
            {
              key: 'organize',
              type: 'list',
              title: '组织类型',
              placeholder: '组织类型',
              list: organize_type
            }
          ];
          filterDetail.list = [
            ...data.list,
            {
              key: 'type',
              type: 'list',
              title: '项目状态',
              placeholder: '项目状态',
              list: _title.map((item, index) => ({ label: item, value: index }))
            }
          ];
          filterDetail.list[1].key = 'pro_type';
        }

        echartsRef.value?.chartInstance.on('click', (e: AnyObject) => {
          console.log(e, e.componentType);
          if (e.componentType === 'title') {
            const _type = [0, 6, 7, 7];
            viewDetail(_type[e.componentIndex]);
          }
        });
      });
    }
    return () => (
      <>
        <SheltV2
          title="项目汇总"
          more="查看详情"
          v-slots={detailSlots.value}
          onViewDetail={viewDetail}
          question="<div><p>【该数据每日02:00更新一次】</p><p>项目汇总数据来源于BI，展示全体研发的项目数据。</p></div>"
        >
          <Echarts
            width="900"
            ref={echartsRef}
            aspectRatio="3/1"
            option={option.value}
          />
        </SheltV2>
        <Detail
          title={detailTitle.value}
          ref={detailRef}
          filterDetail={filterDetail}
          tableDetail={tableDetail}
          requestApi={getProjectList}
          onViewLiDetail={viewLiDetail}
        />
        <ItmeDetail ref={itemDetailRef} />
      </>
    );
  }
});
